import * as echarts from 'echarts'
const dataColor = [
  ['#063CFF', '#E9EEFF'],
  ['#31C3E3', '#EDFAFC'],
  ['#FF6060', '#FFEEEE'],
  ['#FF823C', '#FFF6EC'],
  ['#206EF2', '#E7F0FE'],
]
const triangleDataColor = [
  ['#FFDA84', '#EFF4FB'],
  ['#40DEB1', '#EFF5FE'],
  ['#3BC5E4', '#EEF5FF'],
  ['#5992F2', '#EEF5FF'],
]

const PictorialBar1Option = ({ dataList, xdata, type }) => {
  let options
  if (type == 'triangle') {
    options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
        formatter: function (params) {
          return params[0].name + ': ' + params[0].value
        },
      },
      grid: {
        x: 40,
        y: 40,
        x2: 20,
        y2: 40,
      },
      xAxis: {
        data: xdata,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: {
          color: '#8D93A7',
          margin: 10,
        },
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: { color: '#D4D6E1', type: 'dashed' },
        },
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: true, itemStyle: { color: '#8D93A7' } },
        splitNumber: 4,
      },
      series: [
        {
          name: 'hill',
          type: 'pictorialBar',
          barCategoryGap: '30%',
          symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
          itemStyle: {
            opacity: 1,
          },
          emphasis: {
            itemStyle: {
              opacity: 0.5,
            },
          },
          data: dataList.map((item, index) => {
            return {
              value: item,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: triangleDataColor[index][0],
                  },
                  {
                    offset: 1,
                    color: triangleDataColor[index][1],
                  },
                ]),
              },
            }
          }),
          z: 10,
        },
      ],
    }
  } else {
    options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none',
        },
        formatter: function (params) {
          return params[0].name + ': ' + params[0].value
        },
      },
      grid: {
        left: 20,
        top: 20,
        right: 20,
        bottom: '15%',
      },
      xAxis: {
        data: xdata,
        axisTick: { show: false },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: function (value, index) {
              return dataColor[index][0]
            },
          },
          margin: 13,
        },
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            color: '#D4D6E1',
          },
        },
        splitNumber: 5,
        axisTick: { show: false },
        axisLine: { show: false },
        axisLabel: { show: false },
      },
      series: [
        {
          name: '',
          type: 'pictorialBar',
          barCategoryGap: '-30%',
          symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
          itemStyle: {
            opacity: 1,
          },
          emphasis: {
            itemStyle: {
              opacity: 0.5,
            },
          },
          data: dataList.map((item, index) => {
            return {
              value: item,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: dataColor[index][0],
                  },
                  {
                    offset: 1,
                    color: dataColor[index][1],
                  },
                ]),
                borderColor: dataColor[index][0],
              },
            }
          }),
          z: 10,
          label: {
            show: true,
            color: '#8D93A7',
            position: 'top',
          },
        },
      ],
    }
  }
  return options
}

export { PictorialBar1Option }
